<template>
	<view class="padding-30">
		<view class="bg-fff padding-30 border-radius30 margin-bottom30">
			<view class="flex-justAliCenter-column margin-bottom30">
				<view class="fontSize-15 color-000 margin-bottom20">我的余额(元)</view>
				<view class="fontSize-20 color-000 fontWeight-bold">{{userinfo.money}}</view>
			</view>
			<view class="">
				<view class="fontSize-15 color-000 margin-bottom30">提现金额</view>
				<view class="flex-alignItems-center f-divider1 padding-bottom30 margin-bottom30">
					<view class="fontSize-18 color-000 fontWeight-bold">￥</view>
					<input type="text" class="input-balance" v-model="money"/>
				</view>
				
				<view class="flex-between f-divider1 padding-bottom30 margin-bottom30">
					<view class="fontSize-15 color-000">收款人姓名</view>
					<input type="text" v-model="name" class="input-address" placeholder="请填写收款人姓名" />
				</view>
				
				<view class="padding-bottom30 margin-bottom30">
					<view class="fontSize-15 color-000 margin-bottom30">收款二维码</view>
					<image class="img-200 border-radius10" v-if="shoukuanImage" :src="shoukuanImage" @click="uploadImage" mode=""></image>
					<image class="img-200 border-radius10" v-else @click="uploadImage" src="../../../static/images/upload.png" mode=""></image>
				</view>
				<!-- <view class="flex-between">
					<view class="fontSize-15 color-000">提现至</view>
					<view class="flex-alignItems-center">
						<image class="img-38 border-radius50 margin-right20 img-crisp-edges" src="../../../static/image/mine-11.png" mode=""></image>
						<view class="fontSize-15 color-000">微信</view>
					</view>
				</view> -->
			</view>
		</view>
		
		<view class="flex-center btn-500BA062-15ffffff margin-top150 margin-bottom30" @click="SubmitEvent">
			申请提现
		</view>
		<view class="flex-center fontSize-15 color-2EA5F5" @click="$tools.navigateTo('/pages/mine/mine-list/extract-list')">提现明细</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				money:'',// 提现金额
				name: '', // 收款人姓名
				image:'', // 收款二维码
				shoukuanImage:'',
				userinfo: {}
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods:{
			// 提交
			async SubmitEvent(){
				if(!this.name) return this.$tools.toast('请填写姓名')
				if(!this.money) return this.$tools.toast('请填写收款金额')
				if(!this.image) return this.$tools.toast('请选择图片')
				let form = {}
				form.name = this.name
				form.money = this.money
				form.image = this.image
				let res = await this.$http.post(this.$api.extract,form,{token:true})
				if(res.code == 1){
					this.$tools.toast('提交成功')
					this.$tools.navigateBack(1,200)
				}
			},
			async getUserInfo(){
				let res = await this.$http.post(this.$api.user_info,{},{token:true})
				console.log(res)
				if(res.code == 1){
					this.userinfo = res.data
				}
			},
			// 选择头像
			uploadImage(status) {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'],
					success: function(res) {
						uni.uploadFile({
							url: that.$api.upload + 'common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								'token': uni.getStorageSync('token'),
							},
							success: res => {
								let result = JSON.parse(res.data);
								that.image = result.data.url
								that.shoukuanImage = result.data.fullurl
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.img-200{
		width: 200rpx;
		height: 200rpx;
		flex-shrink: 0;
	}
	.input-address {
		text-align: right;
		font-size: 15px;
		flex: 1;
	}
	.input-balance{
		font-size: 20px;
		color: #000000;
		font-weight: bold;
	}
</style>